<template>
  <div class="record">
      <!-- 新增tab切换（水电费和租金管理） -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane id="meterDom" label="水电表" name="first"></el-tab-pane>
    <el-tab-pane label="租金" name="second"></el-tab-pane>
  </el-tabs>
  <!-- 展示水电表数据 -->
     <!-- 展示水电表区域 -->
     <KeepAlive>
      <div v-if="activeName =='first'">
    <!-- 搜索框 -->
    <div class="search">
      <el-select @change="search" clearable v-model="tenantId" placeholder="请选择租户">
        <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.tenantName" :value="item.tenantId">
        </el-option>
      </el-select>
      <el-select multiple collapse-tags @change="search" clearable v-model="rechargeWay" placeholder="请选择交易方式">
        <el-option v-for="item in rechargeWayList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker @change="change" :clearable="false" v-model="time" type="daterange" align="center"
        range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="success" icon="el-icon-search" @click="search">搜索 / 刷新</el-button>
      <el-button type="primary" icon="el-icon-s-promotion" :disabled="tableData.length !== 0 ? false : true"
        @click="out">导出</el-button>
    </div>
    <!-- 表格数据 -->
    <div class="table" ref="table">
      <el-table :data="tableData" height="650" ref="isExpand" v-loading="loading" border
        highlight-current-row stripe style="width: 100%">
        >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column align="center" prop="tenantName" label="租户名称">
        </el-table-column>
        <el-table-column align="center" prop="count" label="支付总笔数">
        </el-table-column>
        <el-table-column align="center" prop="income" label="交易金额">
          <template slot-scope="scope">
            <el-tag>{{
              scope.row.income ? Number(scope.row.income).toFixed(2) : "0.00"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="holdIncome" label="房东到手">
          <template slot-scope="scope">
            <el-tag>{{
              scope.row.holdIncome ? Number(scope.row.holdIncome).toFixed(2) : "0.00"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="feeIncome" label="手续费">
          <template slot-scope="scope">
            <el-tag>{{
              scope.row.feeIncome ? Number(scope.row.feeIncome).toFixed(2) : "0.00"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="rechargeTime" label="交易时间">
        </el-table-column>
      </el-table>
      <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 30, 50, 100, 150, 200]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
     </KeepAlive>

     <KeepAlive>
    <RentList v-if="activeName=='second'" ></RentList>
  </KeepAlive>
  </div>
</template>

<script>
import RentList from './rentList1.vue'

import {
  getCollectApi,
  getTenantApi,
  outApi,
} from "../../../../api/system/order";
import { Loading } from "element-ui";
export default {
  components: {
    RentList
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: null,
      tenantList: [],
      tenantId: "",
      time: [],
      startDate: "",
      endDate: "",
      rechargeHuifuOrder: "",
      rechargeOrder: "",
      rechargeWay: "",
      rechargeWayList: [
        {
          label: "现金充值",
          value: 1,
        },
        {
          label: "租币充值",
          value: 2,
        },
        {
          label: "微信支付",
          value: 3,
        },
        {
          label: "支付宝支付",
          value: 4,
        },
      ],
      options: {
        fullscreen: true,
        text: "加载中...",
        background: "rgba(0,0,0,.5)",
      },
        activeName: "first" // 用户切换后绑定的标识
    };
  },
  mounted() {

// 在组件加载时模拟点击默认水电表的选项卡  
const defaultTab = { name: 'first', label: '水电表' }; // 模拟选中的选项卡对象  
this.handleClick(defaultTab); // 调用 handleClick 方法  

},
  created() {
    this.pageSize = Number(sessionStorage.getItem("pageSize")) || 10;
    this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
    this.getTenant();
    this.getTime();
    this.getCollect(
      this.pageNum,
      this.pageSize,
      this.startDate,
      this.endDate,
      this.rechargeWay,
      this.tenantId
    );
  },
  destroyed() {
    sessionStorage.removeItem("pageNum");
    sessionStorage.removeItem("pageSize");
  },
  methods: {
        //左侧 区域和分组切换的乐行
        handleClick(e) {
      console.log("切换分组和区域tab", e);
      // 判断点击的是区域选择还是分组选择
      if (e.name == "first") {
        console.log("走水电表");
        // 调用 水电表筛选
      } else {
        console.log("走租金");
        // 调用租金
 
      }
    },
    search() {
      this.pageNum = 1;
      let arr = this.rechargeWay;
      if (this.rechargeWay.length !== 0) {
        this.rechargeWay = this.rechargeWay.join();
      }
      this.getCollect(
        this.pageNum,
        this.pageSize,
        this.startDate,
        this.endDate,
        this.rechargeWay,
        this.tenantId
      );
      this.rechargeWay = arr;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 获取记录列表
    getCollect(pageNum, pageSize, startDate, endDate, rechargeWay, tenantId) {
      this.loading = true;
      getCollectApi(
        pageNum,
        pageSize,
        startDate,
        endDate,
        rechargeWay,
        tenantId
      ).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.loading = false;
          this.tableData = res.data.rows;
        }
      });
    },
    getTime() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      let date = `${year}-${month}-${day}`;
      this.time = [date, date];
      this.startDate = date;
      this.endDate = date;
    },
    change() {
      if (this.time !== null) {
        this.startDate = this.time[0];
        this.endDate = this.time[1];
      } else {
        this.startDate = "";
        this.endDate = "";
      }
      this.search();
    },
    // 获取租户
    getTenant() {
      getTenantApi().then((res) => {
        if (res.code == 200) {
          this.tenantList = res.data;
        }
      });
    },
    // 分页 pagesize
    handleSizeChange(val) {
      this.pageNum = 1;
      let arr = this.rechargeWay;
      if (this.rechargeWay.length !== 0) {
        this.rechargeWay = this.rechargeWay.join();
      }
      this.getCollect(
        this.pageNum,
        val,
        this.startDate,
        this.endDate,
        this.rechargeWay,
        this.tenantId
      );
      this.rechargeWay = arr;
      sessionStorage.setItem("pageSize", val);
      this.pageSize = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // pageNum
    handleCurrentChange(val) {
      let arr = this.rechargeWay;
      if (this.rechargeWay.length !== 0) {
        this.rechargeWay = this.rechargeWay.join();
      }
      this.getCollect(
        val,
        this.pageSize,
        this.startDate,
        this.endDate,
        this.rechargeWay,
        this.tenantId
      );
      this.rechargeWay = arr;
      sessionStorage.setItem("pageNum", val);
      this.pageNum = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 导出
    async out() {
      let arr = this.rechargeWay;
      if (this.rechargeWay.length !== 0) {
        this.rechargeWay = this.rechargeWay.join();
      }
      Loading.service(this.options);
      await outApi(
        this.pageNum,
        this.pageSize,
        this.startDate,
        this.endDate,
        this.rechargeWay,
        this.tenantId
      )
        .then((res) => {
          Loading.service(this.options).close();
          if (
            res.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ) {
            let blob = new Blob([res], { type: "application/octet-stream" });
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", "交易汇总.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch((err) => {
          Loading.service(this.options).close();
          console.log(err);
        });
      this.rechargeWay = arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.record {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .search {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .elInput {
      width: 200px;
      margin: 5px;
    }

    .el-select {
      box-sizing: border-box;
      width: 200px;
      margin: 5px;
    }

    .el-button {
      margin-left: 15px;
    }
  }

  .table {
    height: 90%;

    .el-table {
      height: 80%;
    }

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>